@smui/notched-outline

Svelte Material UI - Notched Outline

Notched outlines are borders around input components.

Installation

You won't generally need to install this package, unless you're manually creating text fields.

npm install --save-dev @smui/notched-outline

Demo

See it in action.

See the demo code.

Whoa There, These Docs are Outdated

The latest SMUI v3 had a lot of changes, and these docs haven't been caught up yet. You should check out the demo page's code to see the latest usage.

Basic Usage

<!--
  Normally you wouldn't provide a notched outline, but you can manually set up a
  textfield like this:
-->
<Textfield variant="outlined">
  <Input bind:value={name} id="name-input" />
  <NotchedOutline>
    <FloatingLabel for="name-input">Name</FloatingLabel>
  </NotchedOutline>
</Textfield>

<script>
  import Textfield, { Input } from '@smui/textfield';
  import FloatingLabel from '@smui/floating-label';
  import NotchedOutline from '@smui/notched-outline';

  let name = '';
</script>

Exports

todo...

More Information

See Text fields in the Material design spec.

See Notched Outline in MDC-Web for information about the upstream library's architecture.

Changelog

4.2.0 (2021-05-05)

Bug Fixes

• events with modifiers called once for every event listener on event (4234efa)
• textfield layout (0ff4b00), closes #241

Features

• allow customizing Label component, add Em and Strong elemental components (5dd42e2)